<template>
    <div class="error-page">
        <el-result icon="error" title="404" sub-title="抱歉，您访问的页面不存在">
            <template #extra>
                <div class="action-buttons">
                    <el-button type="primary" @click="goBack">
                        <el-icon>
                            <Back />
                        </el-icon>返回上一页
                    </el-button>
                    <el-button @click="goHome">
                        <el-icon>
                            <HomeFilled />
                        </el-icon>返回首页
                    </el-button>
                    <el-button type="info" @click="reportError" v-if="showReportButton">
                        <el-icon>
                            <Warning />
                        </el-icon>报告问题
                    </el-button>
                </div>
            </template>

            <!-- 额外的提示信息 -->
            <div class="error-details" v-if="path">
                <el-text type="info" size="small">
                    访问路径: {{ path }}
                </el-text>
            </div>
        </el-result>

        <!-- 报告问题对话框 -->
        <el-dialog v-model="dialogVisible" title="报告问题" width="500px" :before-close="handleClose">
            <el-form :model="reportForm" ref="reportFormRef" :rules="rules">
                <el-form-item label="问题描述" prop="description" :label-width="formLabelWidth">
                    <el-input v-model="reportForm.description" type="textarea" rows="4" placeholder="请描述您遇到的问题..." />
                </el-form-item>
                <el-form-item label="联系方式" prop="contact" :label-width="formLabelWidth">
                    <el-input v-model="reportForm.contact" placeholder="请留下您的联系方式（选填）" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitReport">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElNotification } from 'element-plus'
import { Back, HomeFilled, Warning } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const path = ref('')
const showReportButton = ref(true) // 可以通过配置控制是否显示报告按钮
const dialogVisible = ref(false)
const formLabelWidth = '80px'
const reportFormRef = ref(null)

// 表单数据
const reportForm = ref({
    description: '',
    contact: ''
})

// 表单验证规则
const rules = {
    description: [
        { required: true, message: '请输入问题描述', trigger: 'blur' },
        { min: 10, message: '描述不能少于10个字符', trigger: 'blur' }
    ]
}

onMounted(() => {
    path.value = route.fullPath
})

// 返回上一页
const goBack = () => {
    router.back()
}

// 返回首页
const goHome = () => {
    router.push('/')
}

// 报告问题
const reportError = () => {
    dialogVisible.value = true
}

// 关闭对话框前的回调
const handleClose = (done) => {
    if (reportForm.value.description || reportForm.value.contact) {
        ElMessageBox.confirm('确认关闭？未提交的内容将会丢失')
            .then(() => {
                reportForm.value = {
                    description: '',
                    contact: ''
                }
                done()
            })
            .catch(() => {
                // 取消关闭
            })
    } else {
        done()
    }
}

// 提交报告
const submitReport = async () => {
    if (!reportFormRef.value) return

    await reportFormRef.value.validate((valid) => {
        if (valid) {
            // TODO: 这里添加提交报告的逻辑
            console.log('提交的报告:', {
                path: path.value,
                ...reportForm.value
            })

            ElNotification({
                title: '提交成功',
                message: '感谢您的反馈，我们会尽快处理',
                type: 'success',
            })

            dialogVisible.value = false
            reportForm.value = {
                description: '',
                contact: ''
            }
        }
    })
}
</script>

<style scoped>
.error-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--el-bg-color);
}

.action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.error-details {
    margin-top: 24px;
    text-align: center;
}

:deep(.el-result) {
    padding: 40px 30px;
}

:deep(.el-result__icon) {
    width: 120px;
    height: 120px;
}

:deep(.el-result__title) {
    font-size: 48px;
    margin-top: 20px;
}

:deep(.el-result__sub-title) {
    font-size: 20px;
    margin-top: 10px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

@media (max-width: 768px) {
    .action-buttons {
        flex-direction: column;
    }

    :deep(.el-result__icon) {
        width: 84px;
        height: 84px;
    }

    :deep(.el-result__title) {
        font-size: 32px;
    }

    :deep(.el-result__sub-title) {
        font-size: 16px;
    }
}
</style>